<template>
  <!-- <div class="top-bar-guidance">
    <p>
      点击右上角<img src="~@/assets/safari.png" class="icon-safari" />
      <span id="openm">Safari打开</span>
    </p>
    <p>可以继续浏览本站哦~</p>

    <a style="display: none;" href="" id="vurl" rel="noreferrer"></a>
  </div> -->
  <div class="box">
    <div class="openOut">
      <div>
        点击右上角
        <img src="~@/assets/safari.png" class="icon-safari" />
        <span id="openm">Safari打开</span>
      </div>
      <div>可以继续浏览本站哦~</div>
      <a style="display: none;" href="" id="vurl" rel="noreferrer"></a>
    </div>
    <div class="boxTitle">因内置浏览器协议问题</div>
    <div class="boxText">请点击右上角使用其他浏览器打开</div>
    <div class="llqList">
      <img src="../assets/qq.jpg" alt="" />
      <img src="../assets/360.jpg" alt="" />
      <img src="../assets/guge.jpg" alt="" />
      <img src="../assets/uc.jpg" alt="" />
      <img src="../assets/ie.jpg" alt="" />
    </div>
    <div class="llqTitle">——点击上方已安装的浏览器图标直接跳转——</div>
    <div
      class="copyBtn"
      @click="copyJSON('123')"
      id="copyBtn"
      :data-clipboard-text="currentPageUrl"
      data-clipboard-action="copy"
      data-clipboard-target="#target"
    >
      点击复制本站网址
    </div>
    <div class="url" id="target" v-show="false">{{ currentPageUrl }}</div>
  </div>
</template>

<script>
import Clipboard from 'clipboard'
export default {
  data() {
    return {
      currentPageUrl: '123'
    }
  },
  mounted() {
    function openu(u) {
      document.getElementById('vurl').href = u
      document.getElementById('vurl').click()
    }
    const url = window.location.href
    if (~navigator.userAgent.indexOf('QQ/')) {
      openu('ucbrowser://' + url)
      openu('qqbrowser://' + url)
      openu('mttbrowser://url=' + url)
      openu('baiduboxapp://browse?url=' + url)
      openu('googlechrome://browse?url=' + url)
      openu('mibrowser:' + url)
      document.querySelector('html').addEventListener('click', function() {
        openu('ucbrowser://' + url)
        openu('mttbrowser://url=' + url)
        openu('baiduboxapp://browse?url=' + url)
        openu('googlechrome://browse?url=' + url)
        openu('mibrowser:' + url)
      })
    } else if (~navigator.userAgent.indexOf('MicroMessenger')) {
      if (~navigator.userAgent.indexOf('Android')) {
        const iframe = document.createElement('iframe')
        iframe.style.display = 'none'
        document.body.appendChild(iframe)
      } else {
      }
    }
  },
  methods: {
    copyJSON() {
      const _this = this
      const clipboard = new Clipboard('#copyBtn')
      clipboard.on('success', function(e) {
        _this.$notify({ type: 'success', message: '复制成功' })
      })
      clipboard.on('error', function(e) {
        _this.$notify({ type: 'error', message: '复制失败' })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
html {
  font-family: 'PingFang SC', 'microsoft yahei', arial, 'helvetica neue',
    'hiragino sans gb', sans-serif;
}
body {
  color: #333;
}
html,
body,
ul,
p,
h1,
h2,
h3,
h4,
h5 {
  margin: 0;
  padding: 0;
}
main,
section,
aside,
header,
footer {
  display: block;
}
.box {
  .openOut {
    font-size: 4vw;
    color: #fff;
    height: 20vh;
    line-height: 1.8;
    padding-left: 5vw;
    padding-top: 2.5vh;
    background: url(../assets/open.png) center top no-repeat;
    background-size: 100% auto;
    box-sizing: border-box;
    > div {
      color: #fff;
      #openm {
        color: #fff;
      }
    }
    .icon-safari {
      width: 6vw;
      height: 3vh;
      vertical-align: middle;
      margin: 0 0.2em;
    }
    * {
      margin: 0;
      padding: 0;
    }
  }
  .boxTitle,
  .boxText {
    text-align: center;
    font-weight: bold;
    font-size: 4vw;
  }
  .boxText {
    margin-top: 20px;
  }
  .llqList {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20vh;
    img {
      width: 10.9vw;
      height: 5vh;
      margin: 0 3vw;
    }
  }
  .llqTitle {
    color: blue;
    font-size: 3.5vw;
    text-align: center;
    margin-top: 2vh;
  }
  .copyBtn {
    width: 60%;
    height: 4.5vh;
    border: 1px solid blue;
    color: blue;
    border-radius: 55px;
    text-align: center;
    line-height: 4.5vh;
    margin: 3vh auto;
    font-size: 4vw;
  }
}
</style>
